<template>
  <n-config-provider
      :theme="Theme"
      :hljs="hljs"
  >
    <n-message-provider container-style="word-break: break-all;">
      <n-notification-provider placement="bottom-right" container-style="text-align: left;">
        <n-loading-bar-provider>
          <n-layout has-sider position="absolute">
            <n-layout-sider
                bordered
                collapse-mode="width"
                :collapsed-width="50"
                :width="120"
                :collapsed="collapsed"
                @collapse="collapsed = true"
                @expand="collapsed = false"
            >
              <Aside
                  :collapsed-width="50"
                  :collapsed="collapsed"
                  :icon-size="24"
              />
            </n-layout-sider>
            <n-layout-content>
              <router-view></router-view>
            </n-layout-content>
          </n-layout>
        </n-loading-bar-provider>
      </n-notification-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup>
import {onMounted, ref, shallowRef} from 'vue'
import {
  lightTheme,
  NConfigProvider,
  NLayout,
  NLayoutContent,
  NLayoutSider,
  NMessageProvider,
  NNotificationProvider,
  NLoadingBarProvider
} from 'naive-ui'
import Aside from "./components/Aside.vue"
import hljs from 'highlight.js/lib/core'
import json from 'highlight.js/lib/languages/json'
import {subEvent} from "./api/event.js"
import router from './router'

const collapsed = ref(true)

hljs.registerLanguage('json', json)

// =====================注册事件监听=====================
// 主题切换
subEvent('update_theme', themeChange)
// 菜单切换
subEvent('menu_select', handleMenuSelect)

let Theme = shallowRef(lightTheme)

function handleMenuSelect(key) {
  // 主题切换
}

function themeChange(newTheme) {
  Theme.value = newTheme
}
</script>

<style>

</style>